{% load static%}
<!--头部-->
<header>
    <div class="head_c">
        <!--登录注册-->
        <div class="dl">
            <a href="#">欢迎来到超维度商城！</a>
            {% if request.session.user is None%}
            <a href="login.html">登录</a>
            <span>｜</span>
            <a href="reg.html">注册</a>
            {% else %}
            <span>{{request.session.user.nick_name}}</span>
            <span>&nbsp;</span>
            <a href="/auth/logout">退出登录</a>
            {% endif%}
        </div>

        <div class="head_right">
<!--            <img src="{% static 'images/1.png' %}" alt=""/>-->
<!--            <p>我的订单</p>-->
<!--            <img src="{% static 'images/2.png' %}" alt=""/>-->
<!--            <p>购物车</p>-->
            <img src="{% static 'images/3.png' %}" alt=""/>
            <p style="cursor: pointer" onclick="openCustomer()">客服中心</p>
            <a href="personal.html">个人中心</a>
            {% if good_id is not None %}
            <span>｜</span>
            {% if is_collection == 0 %}
            <a href="javascript:void(0)" onclick="addCollection()">加入收藏</a>
            {% else %}
            <a href="personal.html?type=collection">进入收藏夹</a>
            {% endif %}
            {% endif %}

        </div>
    </div>
</header>

<div style="width: 100%;height: 80px;background: black">
    <ul style="width:1200px;line-height: 80px;list-style: none;margin: 0 auto">
        <li style="float: left;margin-top: 10px;padding: 0 20px">
            <img src="{% static 'images/logo.png' %}" alt="">
        </li>
        <a id="logo" href="/">
            <li style="float: left;color: white;padding: 0 20px">
                商城
            </li>
        </a>
        <li style="float: left;color: white;padding: 0 0 0 50px">
            <input id="keyword" type="text" style="border-radius: 15px;margin-top: 19px;width: 300px;height: 40px;font-size: 16px">
            <img id="searchSub" onclick="submitSearch()" src="{% static 'images/8.png' %}" style="width: 20px;position: relative;top: -55px;left: 270px">
        </li>
        <li id="rmss" style="float: left;color: rgb(89,89,89);padding: 0 0 0 20px">
           热门搜索：
        </li>
    </ul>
</div>

<div id="customer"
     style="display:none;font-family: KaiTi;box-sizing: border-box;position: fixed;right: 0;bottom: 0;width: 500px;height: 400px;background: white;border: 3px solid black">
    <div style="width: 100%;height: 60px;line-height: 60px;border-bottom: 1px solid black;text-align: center">
        <h2>智能客服 - 小智</h2>
    </div>
    <!-- 内容 -->
    <div id="customer_content" style="box-sizing: border-box;padding:5px 10px;width: 100%;height: 238px;
    overflow-x:hidden;overflow-y:auto;">
    </div>
    <!-- 输入框 -->
    <div style="width: 100%;height: 100px;">
        <textarea id="issue" placeholder="在此处输入问题"
                  style="font-size: 16px;box-sizing: border-box;padding: 10px;width: calc(100% - 1px);height: calc(100% - 5px);resize:none"></textarea>
    </div>
    <div onclick="closeCustomer()" title="关闭面板"
         style="width: 20px;height: 20px;position: fixed;right: 10px;bottom: 360px">
        <button>X</button>
    </div>
    <div onclick="sendIssue()" style="width: 60px;height: 20px;position: fixed;right: 20px;bottom: 10px">
        <button style="width: 100%">发送</button>
    </div>
</div>

<script>

    $("#keyword").bind('keyup', function (event) {
        console.log(1)
        if (event.keyCode == "13") {
            //回车执行查询
            $("#searchSub").click()
        }
    });

    //加载菜单
    function loadMenu() {
        $(".index_oneleft").empty();
        $.get(
            "/index/getMenu",
            function (res) {
                if (res.code == 200) {
                    let menus = res.data;
                    for (let i = menus.length-1; i>=0; i--) {
                        let a = document.createElement("a");
                        a.href = "classification.html?menu_id=" + menus[i].id;
                        a.style.float = "left"
                        a.style.color = "white"
                        let li = document.createElement("li");
                        li.style.paddingLeft = "20px"
                        li.style.paddingRight = "20px"
                        li.innerHTML = menus[i].menu_name;
                        a.append(li);
                        $("#logo").after(a)
                        // $(".index_oneleft").append(a)
                    }
                }
            }
        )
    }
    loadMenu()

    function submitSearch() {
        let keyword = $("#keyword").val();
        if (keyword != null && keyword != "") {
            window.location.href = "classification.html?keyword=" + keyword;
        } else {
            alert("清输入搜索内容")
        }
    }

    function addCollection() {
        if ("{{request.session.user}}") {
            let goodsId = "{{good_id}}";
            $.post(
                "/addCollection",
                {"goods_id": goodsId},
                function (res) {
                    if (res.code == 200) {
                        window.location.reload();
                    }
                }
            )
        } else {
            window.location.href = "/login.html"
        }
    }

    function loadRecommendGoods() {
        $(".index_tworight>ul").empty();
        $.get(
            "/getRecommendGoods",
            function (res) {
                if (res.code == 200) {
                    let goodsList = res.data;
                    goodsList.forEach(e => {
                        if (e.keyword != null) {
                            let keys = e.keyword.split("|");
                            if (keys.length > 0) {
                                $("#rmss").after(
                                    "<li style='color:rgb(89,89,89);padding:0 5px;float:left;cursor: pointer;' onclick='clickLi(this)'>" + keys[0] + "</li>"
                                )
                            }else if (keys.length > 1) {
                                $("#rmss").after(
                                    "<li style='color:rgb(89,89,89);padding:0 5px;float:left;cursor: pointer;' onclick='clickLi(this)'>" + keys[1] + "</li>"
                                )
                            }
                        }
                    })
                }
            }
        )
    }

    loadRecommendGoods();

    function clickLi(obj) {
        $("#keyword").val(obj.innerHTML)
        submitSearch()
    }

    function openCustomer() {
        $("#customer").css("display", "block");
    }

    function closeCustomer() {
        $("#customer").css("display", "none");
    }

    function appendCustomer(str) {
        let customer = document.createElement("div");
        customer.className = "customer";
        let imgDiv = document.createElement("div");
        imgDiv.className = "img";
        let img = document.createElement("img");
        img.src = "{% static 'images/customer.png' %}";
        imgDiv.append(img);
        customer.append(imgDiv);
        let text = document.createElement("text");
        text.className = "text";
        let text_name = document.createElement("span");
        text_name.className = "text_name";
        text_name.textContent = "小智";
        let text_value = document.createElement("span");
        text_value.className = "text_value";
        text_value.textContent = str;
        text.append(text_name);
        text.append(text_value);
        customer.append(text);
        $("#customer_content").append(customer)
        document.getElementById("customer_content").lastElementChild.scrollIntoView();
    }

    function appendMe(str) {
        let me = document.createElement("div");
        me.className = "me";
        let imgDiv = document.createElement("div");
        imgDiv.className = "img";
        let img = document.createElement("img");
        img.src = "{% static 'images/user.png' %}";
        imgDiv.append(img);
        me.append(imgDiv);
        let text = document.createElement("text");
        text.className = "text";
        let text_name = document.createElement("span");
        text_name.className = "text_name";
        text_name.textContent = "我";
        let text_value = document.createElement("span");
        text_value.className = "text_value";
        let p = document.createElement("p");
        p.textContent = str;
        text_value.append(p);
        text.append(text_name);
        text.append(text_value);
        me.append(text);
        $("#customer_content").append(me)
        document.getElementById("customer_content").lastElementChild.scrollIntoView();
    }

    function sendIssue() {
        let issue = $("#issue").val().trim();
        if (issue === "") {
            alert("不能发送空内容哦~")
            $("#issue").val("");
            return
        }
        appendMe(issue);
        $("#issue").val("");
        $.post(
            "customer/reply",
            {issue:issue},
            function(res){
                if(res.code==200){
                    appendCustomer(res.data)
                }
            }
        )
    }

    appendCustomer("您好！智能客服【小智】为您服务。")

</script>
